<template>
  <div class="patient-info">
    <div class="header">
      <span style="font-weight: bold"
        >{{ patient.name }}
        <img
          src="@/assets/patient/icon_vip_nor.svg"
          style="vertical-align: middle;"
          v-if="patient.isMember == '1'"
        />
      </span>
      <span class="gender" style="font-weight: bold"> {{ patient?.patientGender == 1 ? '男' : patient.patientGender == 2 ? '女' :patient.patientGender == 3 ? '未知': '' }}</span>
      <span style="font-weight: bold" class="gender"
        >{{ patient.age }}岁{{ patient.birthMonth }}月</span
      >
      <span style="font-weight: bold" class="gender"> {{ patient.phone }}</span>
      <span class="gender tag" v-if="patient.lastVisitDate != '-'"
        >最近就诊 {{ patient.lastVisitDate }}</span
      >
      <span class="recent-visit">
        <el-button class="edit-button" @click="onPatientEdit">修改</el-button>
        <el-button class="appointment-button" @click="onAppointment"
          >预约</el-button
        >
      </span>
    </div>
    <div class="details">
      <div class="detail-row">
        <span class="label">体重</span>
        <span class="value">{{ patient.weight }}kg</span>
        <span class="label">身高</span>
        <span class="value">{{ patient.height }}cm</span>
        <span class="label">血压</span>
        <span class="value" >{{ patient.bloodPressure || '-'}}</span>
      </div>
      <div class="detail-row">
        <span class="label">身份证号</span>
        <span class="value">{{ patient.idNumber }}</span>
        <span class="label">阴历生日</span>
        <span class="value">{{ patient.lunarBirthday }}</span>
        <span class="label">阳历生日</span>
        <span class="value">{{ patient.solarBirthday }}</span>
      </div>
      <div class="detail-row">
        <span class="label">民族</span>
        <span class="value">{{ patient.ethnicity }}</span>
        <span class="label">婚否</span>
        <span class="value">{{ patient.maritalStatus }}</span>
        <span class="label">单位</span>
        <span class="value">{{ patient.unit }}</span>
      </div>
      <div class="detail-row">
        <span class="label">家庭住址</span>
        <span class="value">{{ patient.address }}</span>
      </div>
      <div class="detail-row">
        <span class="label">既往史</span>
        <span class="value multi-line" style="">{{ patient.medicalHistory }}</span>
      </div>
      <div class="detail-row">
        <span class="label">过敏史</span>
        <span class="value multi-line" style="">{{ patient.allergyHistory }}</span>
      </div>
      <div class="detail-row">
        <span class="label">备注</span>
        <span class="value multi-line">{{ patient.remarks }}</span>
      </div>
    </div>
    <!-- 挂号 -->
    <RegisterDialog
      :showRegisterDialog="showRegisterDialog"
      ref="registerDialogRef"
      @confirm="handleRegisterConfirm"
      @cancel="showRegisterDialog = false"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import type { PatientDetail } from '@/types/patient';
import RegisterDialog from './RegisterDialog.vue';
import {
  getGenderText,
  getMaritalStatusText,
  getEthnicityText,
  getAgeDescription,
  formatBloodPressure,
} from '@/types/patient';
import stores from '@/store';
const registerDialogRef = ref<InstanceType<typeof RegisterDialog> | null>(null);
const props = defineProps<{
  patientDetail?: PatientDetail;
}>();
const showRegisterDialog = ref(false);
const emits = defineEmits(['edit']);
import dayjs from 'dayjs';
const useBaseDataStore = stores.useBaseDataStore();
// 使用计算属性来转换和格式化患者数据
const patient = computed(() => {
  if (!props.patientDetail) {
    return {
      name: '-',
      gender: '-',
      patientGender:4,
      age: 0,
      birthMonth: 0,
      phone: '-',
      lastVisitDate: '-',
      weight: 0,
      height: 0,
      bloodPressure: '-',
      idNumber: '-',
      lunarBirthday: '-',
      solarBirthday: '-',
      ethnicity: '-',
      maritalStatus: '-',
      unit: '-',
      address: '-',
      medicalHistory: '-',
      allergyHistory: '-',
      remarks: '-',
    };
  }

  const detail = props.patientDetail;

  return {
    name: detail.patientName || '-',
    gender: '',
    patientGender: detail.patientGender,
    age: detail.ageYear || 0,
    birthMonth: detail.ageMonth || 0,
    phone: detail.patientPhone || '-',
    lastVisitDate: detail.lastVisitDate || '-',
    weight: detail.weight || 0,
    height: detail.height || 0,
    bloodPressure: (() => {
      const sys = detail.systolicBp;
      const dia = detail.diastolicBp;
      const empty = (v: any) => v === undefined || v === null || v === '';
      if (empty(sys) && empty(dia)) return '';
      // 只要有一个有值就展示，缺失的留空不显示多余的 '/'
      if (empty(sys)) return String(dia) + 'mmHg';
      if (empty(dia)) return String(sys) + 'mmHg';
      return sys + '/' + dia + 'mmHg';
    })(),
    idNumber: detail.idCard || '-',
    lunarBirthday: detail.lunarBirthday || '-',
    solarBirthday: detail.solarBirthday || '-',
    ethnicity: useBaseDataStore.getEnumData(detail.ethnicity,'ethnicityEnum'),
    maritalStatus: detail.isMarried === '1' ? '已婚' : detail.isMarried === '0' ? '未婚' : '-',
    unit: detail.company || '-',
    address: detail.address || '-',
    medicalHistory: detail.medicalHistory || '-',
    allergyHistory: detail.allergyHistory || '-',
    remarks: detail.remark || '-',
    isMember: detail.isMember || '0', // 是否会员 1是 0否
  };
});
const handleRegisterConfirm = (row: any) => {
  showRegisterDialog.value = false;
  // successDept.value = row.deptName;
  // successDoctor.value = row.doctorName;
  // successTime.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm');
  // successFee.value = row.regFee;
  // showSuccessDialog.value = true;
  // getDoctorListApi()
};
const onPatientEdit = () => {
  // 触发一个事件，通知父组件进行编辑操作
  // 这里可以使用 emits 来定义事件
  emits('edit');
};
const onAppointment = () => {
  showRegisterDialog.value = true;
  //console.log(patient);

  let rowData = {
    ...props.patientDetail,
    visitDate: patient.value.lastVisitDate,
    timeType: '2',
  };
  //console.log(rowData);

  registerDialogRef.value?.open(rowData, 1);
};
</script>

<style scoped>
.patient-info {
  padding: 26px 20px;

  width: calc(100% - 290px);
  height: 420px;
  background: #ffffff;
  border-radius: 12px 12px 12px 12px;
  margin-right: 10px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 10px;
}

.gender {
  margin-left: 10px;
}

.recent-visit {
  margin-left: auto;
  margin-right: 10px;
}

.edit-button,
.appointment-button {
  background-color: #009688;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.details {
  display: flex;
  flex-direction: column;
  margin-top: 13px;
}

.detail-row {
  display: flex;
  margin-bottom: 5px;
  margin-top: 13px;
  font-size: 14px;
}

.label {
  width: 100px;
}

.value {
  flex: 1;
}
.tag {
  width: 139px;
  height: 26px;
  line-height: 26px;
  background: #f3f3f3;
  border-radius: 3px 3px 3px 3px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
}
.multi-line {
  display: -webkit-box;     /* 使用flexbox布局 */
  -webkit-line-clamp: 2;    /* 限制显示行数 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  overflow: hidden;         /* 隐藏溢出内容 */
  text-overflow: ellipsis;  /* 显示省略号 */
}
</style>
